<template>
  <div class="create-product-page">
    <Navbar />
    <div class="create-product-container">
      <h1>创建商品</h1>
      <form @submit.prevent="handleSubmit">
        <div class="form-group">
          <label for="title">商品名称</label>
          <input
              type="text"
              id="title"
              v-model="product.title"
              required
              placeholder="请输入商品名称"
          >
        </div>

        <div class="form-group">
          <label for="description">商品描述</label>
          <textarea
              id="description"
              v-model="product.description"
              required
              placeholder="请输入商品描述"
              rows="5"
          ></textarea>
        </div>

        <div class="form-group">
          <label for="price">商品价格</label>
          <input
              type="number"
              id="price"
              v-model="product.price"
              required
              step="0.01"
              min="0"
              placeholder="请输入商品价格"
          >
        </div>

        <div class="form-group">
          <label for="stock">商品库存</label>
          <input
              type="number"
              id="stock"
              v-model="product.stock"
              required
              min="0"
              placeholder="请输入商品库存"
          >
        </div>

        <div class="form-group">
          <label for="imgUrl">商品图片URL</label>
          <input
              type="text"
              id="imgUrl"
              v-model="product.imgUrl"
              required
              placeholder="请输入商品图片URL"
          >
        </div>

        <button type="submit" class="submit-btn">创建商品</button>
      </form>
    </div>
  </div>
</template>

<script setup>
import { ref } from 'vue';
import { useRouter } from 'vue-router';
import Navbar from '../components/Navbar.vue';
import { productAPI } from '../services/api';

const router = useRouter();
const product = ref({
  title: '',
  description: '',
  price: '',
  stock: '',
  imgUrl: ''
});

const handleSubmit = async () => {
  try {
    // 转换价格为数字
    const productData = {
      ...product.value,
      price: parseFloat(product.value.price),
      stock: parseInt(product.value.stock)
    };

    await productAPI.create(productData);
    alert('商品创建成功');
    router.push('/products');
  } catch (error) {
    alert('商品创建失败: ' + (error.message || '未知错误'));
  }
};
</script>

<style scoped>
.create-product-container {
  max-width: 800px;
  margin: 20px auto;
  padding: 20px;
  background-color: white;
  border-radius: 8px;
  box-shadow: 0 2px 10px rgba(0,0,0,0.1);
}

h1 {
  text-align: center;
  margin-bottom: 30px;
  color: #333;
}

.form-group {
  margin-bottom: 20px;
}

label {
  display: block;
  margin-bottom: 8px;
  color: #666;
  font-weight: 500;
}

input, textarea {
  width: 100%;
  padding: 10px;
  border: 1px solid #ddd;
  border-radius: 4px;
  font-size: 1rem;
}

textarea {
  resize: vertical;
}

.submit-btn {
  width: 100%;
  padding: 12px;
  background-color: #4CAF50;
  color: white;
  border: none;
  border-radius: 4px;
  font-size: 1rem;
  cursor: pointer;
  margin-top: 10px;
}

.submit-btn:hover {
  background-color: #45a049;
}
</style>